<template>
  <List item-layout="vertical">
    <ListItem v-for="item in data" :key="item.title">
      <ListItemMeta
        :avatar="item.avatar"
        :title="item.title"
        :description="item.description"
      />
      {{ item.content }}
      <template slot="action">
        <li><Icon type="ios-star-outline" /> 123</li>
        <li><Icon type="ios-thumbs-up-outline" /> 234</li>
        <li><Icon type="ios-chatbubbles-outline" /> 345</li>
      </template>
      <template slot="extra">
        <img
          src="https://dev-file.iviewui.com/5wxHCQMUyrauMCGSVEYVxHR5JmvS7DpH/large"
          style="width: 280px"
        />
      </template>
    </ListItem>
  </List>
</template>

<script>
export default {
  name: "mx-list",
  props: {
    datetime: {
      type: String,
      default: new Date().toDateString()
    },
    title: {
      type: String,
      default: "title"
    }
  }
};
</script>

<style lang="less" scoped>
.mx-list {
  .title {
    font-size: 1.2rem;
    font-weight: 700;
  }
  .datetime {
    font-size: 0.8rem;
    color: #ccc;
  }
}
</style>
